﻿import QtQuick 6.7
import QtQuick.Controls 6.7
import QtQuick.Controls.Basic 6.7
import QtCore
 import Qt.labs.platform

Rectangle {
    id: root
    property real itemHeight: parent.height / 6
    property real itemWidth: parent.width / 2

    // debug
    property bool is_debug: false
    property string tag: "[PorxyConfig]: "

    Rectangle {
        id: rect_port_label
        height: itemHeight
        width: itemWidth
        // border.color: "black"
        Label {
            anchors.fill: parent
            text: "Port"
            font.pointSize: 12
            leftPadding: 12
            color: "#595959"
            font.family: "Comic Sans MS"
            verticalAlignment: Text.AlignVCenter
        }
    }
    Rectangle {
        id: rect_port_editLine
        height: itemHeight
        width: itemWidth
        anchors.left: rect_port_label.right
        property alias text: textfield.text
        property alias editEnable: textfield.enabled
        TextField {
            id: textfield
            anchors.centerIn: parent
            width: parent.width
            height: 30
            verticalAlignment: TextInput.AlignVCenter
            horizontalAlignment: TextInput.AlignHCenter
            leftPadding: 10
            rightPadding: leftPadding
            font.pointSize: 13
            font.family: "Segoe UI Semilight"
            maximumLength: 5
            background: Rectangle {
                anchors.fill: parent
                radius: 8
                border.width: 2
                border.color: "#dfffef"
            }
            // default text
            text: "8082"
        }
        Settings {
            id: settings_switch_status
            category: "PorxyConfig"
            // for Qt 6.5+, not created settings.ini
            location: mQmlPorxyConfigService.settingsPath
            property alias port: textfield.text
        }
    }
    Rectangle {
        id: rect_porxy_switch_label
        width: itemWidth
        height: itemHeight
        y: 0 + (itemHeight * 1)
        Label {
            anchors.fill: parent
            leftPadding: 12
            text: "Porxy Switch"
            font.pointSize: 13
            font.family: "Comic Sans MS"
            color: "#595959"
            verticalAlignment: Text.AlignVCenter
        }
    }
    Rectangle {
        id: rect_porxy_switch
        anchors.left: rect_porxy_switch_label.right
        anchors.top: rect_port_editLine.bottom
        width: itemWidth
        height: itemHeight
        MySwitch {
            anchors.centerIn: parent
            onClicked: {
                if (is_debug) console.log(tag, "MySwitch checked changed: ", checked)
                if (checked) {
                    if (is_debug) console.log("get Proxy Server Port Text: ", rect_port_editLine.text)
                    mQmlPorxyConfigService.serverPort = Number(rect_port_editLine.text)
                    if (mQmlPorxyConfigService.serverPort <= 0 || mQmlPorxyConfigService.serverPort > 65535) {
                        checked = false
                        return
                    }
                    console.log("Get Porxy Server Port: ", mQmlPorxyConfigService.serverPort)
                    mQmlPorxyConfigService.start()
                    rect_port_editLine.editEnable = false
                } else {
                    mQmlPorxyConfigService.stop()
                    rect_port_editLine.editEnable = true
                }
            }
        }
        // border.color: "black"
    }
    Image {
        id: image_icon_nbg_png
        height: 128
        width: 128
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        opacity: 0.5
        source: "qrc:/images/favicon_nbg.png"
    }
    // Rectangle {
    //     id: rect_about_button
    //     width: 100
    //     height: 30
    //     anchors.right: parent.right
    //     anchors.bottom: parent.bottom
    //     radius: 8
    //     border.color: "#dfffef"
    //     border.width: 2
    //     Text {
    //         anchors.centerIn: parent
    //         text: "About"
    //         font.family: "Comic Sans MS"
    //         color: "#595959"
    //     }

    //     MouseArea {
    //         anchors.fill: parent
    //         propagateComposedEvents: true
    //         onClicked: (mouse)=> {
    //             console.log("点击了button")
    //             mouse.accepted = false
    //         }
    //         onPressedChanged: {
    //             rect_about_button.color = pressed ? "#dfffef" : "white"
    //         }
    //     }
    // }

    Component.onCompleted: {
        if (is_debug) {
            console.log(tag, "PorxyConfigRect loaded")
        }
    }
}
